<template>
  <el-container>
    <el-header>
      <div class="s-t">E充管理平台</div>
      <div class="username-div"> 
          <el-avatar :src-set="avatar" /> 
          <span class="user-name" style="display: none;">{{userName}}</span> 
      </div>

    </el-header>
    <el-container>
      <el-aside>

        <el-menu mode="vertical" :default-active="currentPath" router @select="selectedMenu"
          style="border-bottom: none;width: 1250px;">
          <div v-for="(navMenu, index) in adminMenuList" :key="index">

            <!-- 如果没有子节点 -->
            <el-menu-item v-if="!navMenu.children" :index="navMenu.menuUrl">
              <template #title>
                <el-icon><component :is="navMenu.icon" /></el-icon>
                <span>{{ navMenu.menuName }}</span>
              </template>
            </el-menu-item>

            <!-- 如果有子节点 -->
            <el-sub-menu v-if="navMenu.children" :index="String(navMenu.id)" class="mu_submenu">
              <!-- 父节点 -->
              <template #title>
                <el-icon><component :is="navMenu.icon" /></el-icon>
                <span>{{ navMenu.menuName }}</span>
              </template>
              <!-- 子节点 -->
              <el-menu-item v-for="subMenu in navMenu.children" :index="subMenu.menuUrl">
                {{ subMenu.menuName }}
              </el-menu-item>
            </el-sub-menu>
          </div>
        </el-menu>

      </el-aside>
      <el-main>
        <RouterView />
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup>
import { MenuList } from '@/api/admin.js'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

var adminMenuList = ref([]);

let currentPath = ref('')

onMounted(() => {
  let route = useRoute()
  currentPath.value = route.path
})

const userInfoJsonString = localStorage.getItem("userInfo");

var avatar=ref('');
var userName=ref('');
// 检查是否成功获取了值
if (userInfoJsonString) {
  // 使用 JSON.parse 将字符串解析为 JSON 对象
  const userInfoJson = JSON.parse(userInfoJsonString);
  // 现在 userInfoJson 是一个 JavaScript 对象，您可以根据需要使用它
  userName.value=userInfoJson.userName;
  avatar.value=userInfoJson.avatar;
}
getAdminMenuList();
function getAdminMenuList() {
  MenuList()
    .then(res => {
      console.info(res.data.data);
      adminMenuList.value = res.data.data;
    })
}
function selectedMenu() {

}
</script>

<style>
body,
html,
#app {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

.el-container {
  margin: 0px;
  padding: 0px;
  /* background-color: brown; */
  width: 100%;
  height: 100%;
}


.el-aside {
  margin-top: 0px;
  margin-left: 0px;
  padding-top: 20px;
  width: 180px;
  /* background-color: #747171; */
  text-align: center;
}

.router-dev {
  /* padding-top: 80px; */
  color: aliceblue;
  font-size: var(--el-form-label-font-size);
  ;
}

.router-link-active {
  text-decoration: none;
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
  /* background: #747171 !important; */
  color: #7EA4DD;
  font-size: 18px;
  font-weight: bold;
  height: 80px;
}

/* 导航菜单设置样式*/
.el-menu--collapse .el-menu .el-submenu,
.el-menu--popup {
  min-width: 100px !important;
  padding: 0 15px !important;
  border: none !important;
  text-align: center !important;
}

.el-menu--horizontal {
  display: inline;
}


.el-header {
  margin: 0px;
  height: 50px;
  display: flex;
  /* 使用Flexbox布局 */
  justify-content: space-between;
  /* 主轴（水平方向）上左右对齐 */
  align-items: center;
  /* 交叉轴（垂直方向）上居中对齐 */
  padding: 10px;
  /* 可选，添加一些内边距 */
  width: 100%;
  background-color: rgb(54, 194, 182);
  text-align: right;

}

.s-t {
  padding-bottom: 5px;
  padding: 10px;
  /* background-color: aquamarine; */
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  color: rgb(214, 128, 22);
}

.username-div {
  padding-right: 10px;
  color: #0e0d0d;
}



.el-main {
  /* background-color: cadetblue; */
  margin: 5px;
  width: 100%;
  /* border:1px solid #cccccc; 灰色线 */
}

.username-div {
  position: relative; /* 确保容器是相对定位的 */
  /* 其他样式 */
}

/* .user-name {
  position: absolute; 
  top: 相对于头像的位置;
  left: 相对于头像的位置;
  其他样式
} */

.username-div:hover .user-name {
  display: block; /* 在悬停时显示用户名 */
}
</style>
